<template>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'id'">
        <span>
          <smile-outlined />
          ID
        </span>
      </template>
      <template v-if="column.key === 'userName'">
        <span>
          <smile-outlined />
          用户名
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'userAccount'">
        <span>{{ record.userAccount }}</span> <!-- 修复：显示实际账号 -->
      </template>
      <template v-else-if="column.key === 'userPassword'">
        <span>{{ record.userPassword }}</span> <!-- 修复：显示实际密码 -->
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.userName }}</a> <!-- 修复：使用 userName -->
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive } from "vue";
import { list } from "@/api/userController.ts";
import { message } from "ant-design-vue";

// ✅ 修复1: 使用 const 并正确更新数组内容
const data = reactive<API.User[]>([])

const searchParams = reactive<API.UserQueryRequest>({
  current: 1,
  pageSize: 10
})

// ✅ 修复2: 使用 title 而不是 name
const columns = [
  {
    title: '用户🆔', // ✅
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '用户名', // ✅
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '用户账号',
    dataIndex: 'userAccount',
    key: 'userAccount',
  },
  {
    title: '密码',
    dataIndex: 'userPassword',
    key: 'userPassword',
  },
  {
    title: '简介',
    key: 'userProfile',
    dataIndex: 'userProfile',
  },
  {
    title: 'Action',
    key: 'action',
  },
];

const getUSerList = async (params: any) => {
  const res: any = await list(params)
  if (res.data.code === 0){
    message.success('获取数据成功')
    // ✅ 修复1: 正确更新响应式数组
    data.length = 0;
    data.push(...res?.data?.data.records);
  }else {
    message.error('获取数据失败' + res.data.msg)
  }
}

// TODO: 实现分页逻辑
const pageUp = () => {

}
onMounted(() => {
  getUSerList(searchParams)
})
</script>
